<template>
	<view class="container">
		<!-- 活动头部 -->
		<view class="activity-header">
			<image class="activity-banner" src="/static/banner/banner.jpg" mode="aspectFill"/>
			<view class="activity-info">
				<text class="activity-title">游戏策划征集计划</text>
				<text class="activity-subtitle">100万奖金等你来拿！</text>
				<view class="activity-stats">
					<view class="stat-item">
						<text class="stat-value">3280</text>
						<text class="stat-label">参与人数</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">15</text>
						<text class="stat-label">剩余天数</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 活动内容 -->
		<view class="content-section">
			<view class="section-title">
				<text class="title-text">活动说明</text>
			</view>
			<view class="content-text">
				<text class="paragraph">亲爱的游戏创作者们：</text>
				<text class="paragraph">我们诚挚邀请您参与这次游戏策划征集活动！我们在寻找富有创意和激情的游戏策划方案，优秀的作品将获得丰厚奖金支持。</text>
				
				<view class="rewards">
					<text class="rewards-title">奖励设置</text>
					<view class="reward-item">
						<text class="reward-rank">🏆 一等奖</text>
						<text class="reward-value">50万元</text>
					</view>
					<view class="reward-item">
						<text class="reward-rank">🥈 二等奖</text>
						<text class="reward-value">30万元</text>
					</view>
					<view class="reward-item">
						<text class="reward-rank">🥉 三等奖</text>
						<text class="reward-value">20万元</text>
					</view>
				</view>
				
				<text class="paragraph">参与要求：</text>
				<view class="requirements-section">
					<text class="requirement-title">1. 策划文档要求</text>
					<text class="requirement">• 提交完整的游戏策划方案（Word或PDF格式）</text>
					<text class="requirement">• 文档需包含游戏概念、目标用户分析</text>
					<text class="requirement">• 详细的游戏机制和玩法设计</text>
					<text class="requirement">• 游戏世界观和剧情框架设计</text>
					
					<text class="requirement-title">2. 原型演示要求</text>
					<text class="requirement">• 提供可交互的游戏原型或演示视频</text>
					<text class="requirement">• 原型需展示核心玩法机制</text>
					<text class="requirement">• 视频长度3-5分钟，需配音或字幕</text>
					
					<text class="requirement-title">3. 美术设计要求</text>
					<text class="requirement">• 提供主要角色和场景概念设计</text>
					<text class="requirement">• 游戏UI界面框架设计</text>
					<text class="requirement">• 至少3张高质量游戏概念图</text>
					
					<text class="requirement-title">4. 提交说明</text>
					<text class="requirement">• 所有内容需打包为zip格式提交</text>
					<text class="requirement">• 文件大小不超过500MB</text>
					<text class="requirement">• 提交截止时间：2024年6月30日</text>
				</view>
				
				<text class="paragraph">评选标准：</text>
				<view class="criteria-section">
					<view class="criteria-item">
						<text class="criteria-title">创新性 (30%)</text>
						<text class="criteria-desc">游戏概念的独特性和创新程度</text>
					</view>
					<view class="criteria-item">
						<text class="criteria-title">完整性 (25%)</text>
						<text class="criteria-desc">方案的完整度和可执行性</text>
					</view>
					<view class="criteria-item">
						<text class="criteria-title">市场性 (25%)</text>
						<text class="criteria-desc">市场潜力和目标用户契合度</text>
					</view>
					<view class="criteria-item">
						<text class="criteria-title">品质 (20%)</text>
						<text class="criteria-desc">原型/演示的制作品质</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加底部占位 -->
		<view class="bottom-space"></view>

		<!-- 参与按钮 -->
		<view class="action-bar">
			<button class="share-btn" @click="handleShare">分享活动</button>
			<button class="join-btn" @click="handleJoin">立即参与</button>
		</view>
	</view>
</template>

<style scoped>
.container {
	background: #1E1E2E;
	min-height: 100vh;
}

.activity-header {
	position: relative;
	margin-bottom: 20px;
}

.activity-banner {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.activity-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(to top, 
		rgba(30, 30, 46, 1) 0%,
		rgba(30, 30, 46, 0.95) 30%,
		rgba(30, 30, 46, 0.8) 60%,
		rgba(30, 30, 46, 0) 100%
	);
}

.activity-title {
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	margin-bottom: 8px;
	display: block;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.activity-subtitle {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 15px;
	display: block;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.activity-stats {
	display: flex;
	gap: 20px;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-value {
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.stat-label {
	font-size: 12px;
	color: #9796B8;
	margin-top: 4px;
}

.content-section {
	padding: 20px;
	background: #2D2D44;
	margin: 15px;
	border-radius: 20px;
	border: 1px solid #4D4C6D;
}

.section-title {
	margin-bottom: 15px;
	padding-left: 12px;
	border-left: 4px solid #6E6C89;
}

.title-text {
	font-size: 18px;
	font-weight: bold;
	color: #9796B8;
}

.content-text {
	color: #6E6C89;
	line-height: 1.6;
}

.paragraph {
	margin-bottom: 15px;
	display: block;
	color: #9796B8;
}

.rewards {
	background: rgba(77, 76, 109, 0.3);
	border-radius: 12px;
	padding: 15px;
	margin: 20px 0;
}

.rewards-title {
	font-size: 16px;
	font-weight: bold;
	color: #9796B8;
	margin-bottom: 12px;
	display: block;
}

.reward-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(110, 108, 137, 0.2);
}

.reward-item:last-child {
	border-bottom: none;
}

.reward-rank {
	color: #9796B8;
	font-size: 15px;
}

.reward-value {
	color: #9796B8;
	font-weight: bold;
}

.requirements-section {
	margin: 15px 0;
}

.requirement-title {
	color: #9796B8;
	font-size: 15px;
	font-weight: bold;
	margin: 15px 0 8px;
	display: block;
}

.requirement {
	color: #6E6C89;
	margin-bottom: 8px;
	display: block;
	padding-left: 20px;
	line-height: 1.5;
}

.criteria-section {
	background: rgba(77, 76, 109, 0.3);
	border-radius: 12px;
	padding: 15px;
	margin: 15px 0;
}

.criteria-item {
	padding: 10px 0;
	border-bottom: 1px solid rgba(110, 108, 137, 0.2);
}

.criteria-item:last-child {
	border-bottom: none;
}

.criteria-title {
	color: #9796B8;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 4px;
	display: block;
}

.criteria-desc {
	color: #6E6C89;
	font-size: 12px;
}

.action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px 20px;
	background: #2D2D44;
	border-top: 1px solid #4D4C6D;
	display: flex;
	gap: 15px;
	/* 添加安全区域适配 */
	padding-bottom: calc(15px + constant(safe-area-inset-bottom));
	padding-bottom: calc(15px + env(safe-area-inset-bottom));
}

.share-btn, .join-btn {
	flex: 1;
	height: 44px;
	border-radius: 22px !important;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.share-btn {
	background: #2D2D44 !important;
	border: 1px solid #6E6C89 !important;
}

.join-btn {
	background: #4D4C6D !important;
}

button:active {
	transform: scale(0.98);
	opacity: 0.9;
}

/* 添加底部占位样式 */
.bottom-space {
	height: 90px; /* 与action-bar的总高度匹配（包括padding和border） */
}
</style>

<script>
export default {
	data() {
		return {
			activityInfo: {
				title: '游戏策划征集计划',
				desc: '100万奖金等你来拿！',
				imageUrl: '/static/banner/banner.jpg'
			}
		}
	},
	methods: {
		handleShare() {
			// 显示分享选项菜单
			uni.showActionSheet({
				itemList: ['复制链接', '保存分享图'],
				success: (res) => {
					switch (res.tapIndex) {
						case 0:
							this.copyLink()
							break
						case 1:
							this.saveImage()
							break
					}
				}
			})
		},
		copyLink() {
			// 生成分享链接（这里使用示例链接，实际应该使用真实的活动链接）
			const shareLink = `https://yourapp.com/activity?id=${encodeURIComponent(this.activityInfo.title)}`
			
			uni.setClipboardData({
				data: shareLink,
				success: () => {
					uni.showToast({
						title: '链接已复制',
						icon: 'success'
					})
				}
			})
		},
		saveImage() {
			// 下载并保存分享图片
			uni.downloadFile({
				url: this.activityInfo.imageUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '图片已保存',
									icon: 'success'
								})
							},
							fail: () => {
								uni.showToast({
									title: '保存失败，请检查权限',
									icon: 'none'
								})
							}
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '图片下载失败',
						icon: 'none'
					})
				}
			})
		},
		handleJoin() {
			// 选择文件
			uni.chooseFile({
				count: 1, // 最多选择文件数量
				type: 'all', // 所有文件类型
				extension: ['.zip', '.rar', '.doc', '.docx', '.pdf'], // 限制文件类型
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					const fileSize = res.tempFiles[0].size
					
					// 检查文件大小（500MB = 500 * 1024 * 1024 字节）
					if (fileSize > 500 * 1024 * 1024) {
						uni.showToast({
							title: '文件大小不能超过500MB',
							icon: 'none'
						})
						return
					}
					
					// 显示上传进度
					uni.showLoading({
						title: '正在上传...',
						mask: true
					})
					
					// 上传文件
					uni.uploadFile({
						url: 'YOUR_UPLOAD_API_URL', // 替换为实际的上传接口
						filePath: tempFilePath,
						name: 'file',
						formData: {
							'activityId': '1', // 活动ID
							'userId': 'xxx' // 用户ID
						},
						success: (uploadRes) => {
							uni.hideLoading()
							
							// 解析返回结果
							const result = JSON.parse(uploadRes.data)
							if (result.success) {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
							} else {
								uni.showToast({
									title: result.message || '提交失败',
									icon: 'none'
								})
							}
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败，请重试',
								icon: 'none'
							})
							console.error('Upload failed:', err)
						}
					})
				},
				fail: (err) => {
					if (err.errMsg.includes('cancel')) {
						// 用户取消选择文件，不做处理
						return
					}
					uni.showToast({
						title: '选择文件失败',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script> 